<!DOCTYPE html>
<html lang="Zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光按钮</title>
    <style>*｛
        margin:0;
        padding:0;
    ｝
    body{
       background-color: #000; 
    }
    a{
        text-decoration: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 24px;
        background: linear-gradient(90deg,#5A92E9,#ED19D2,#F3E506,#5A92E9);
        background-size: 400%;
        width: 400px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
        text-transform: uppercase;
        border-radius: 50px;
        z-index: 1;
    }
    a::before{
        content: "";
        position: absolute;
        left: -5px;
        right: -5px;
        top: -5px;
        bottom: -5px;
        background: linear-gradient(90deg,#5A92E9,#ED19D2,#F3E506,#5A92E9);
        background-size: 400%;
        border-radius: 50px;
        filter: blur(20px);
        z-index: -1;
    }
    a:hover::before{
        animation: sun 8s infinite;
    }
    a:hover{
        animation: sun 8s infinite;
    }
    @keyframes sun{
        100%{
            background-position:-400% 0;
    
        }
    }</style>
</head>
<body>
    <a href="JavaScript:;">sunbotton</a>
</body>
</html>